<template>
  <!-- 搜索页 -->
  <div class="searchPc">
    <div class="box">
      <searchInfo :count="count"></searchInfo>

      <div class="list">
        <div
          class="item"
          v-for="item in data"
          :key="item"
          @click="detail(item)"
        >
          <img class="img" :src="item.images" />
          <div class="category">{{ item.categoryName }}</div>
          <div class="name-box">
            <div class="name">{{ item.name }}</div>
            <img
              class="arrow"
              src="../../../assets/image/product/ic_r-arrow.png"
            />
          </div>
        </div>
      </div>
      <div class="pagination" v-if="data.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="total"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>

  <!-- 移动端 -->
  <div class="searchMobile">
    <div class="box">
      <searchInfo :count="count"></searchInfo>

      <div class="list">
        <div
          class="item"
          v-for="item in data"
          :key="item"
          @click="detail(item)"
        >
          <img class="img" :src="item.images" />
          <div class="category">{{ item.categoryName }}</div>
          <div class="name-box">
            <div class="name">{{ item.name }}</div>
            <img
              class="ic"
              src="../../../assets/image/product/ic_r-arrow.png"
            />
          </div>
        </div>
      </div>
      <div class="pagination" v-if="data.length > 0">
        <div class="more-box" @click="nextPage">
          <div class="text">加载更多</div>
          <img
            class="ic"
            v-if="page < total"
            src="../../../assets/image/publice/bottom-arrow.png"
          />
          <img
            class="ic"
            v-if="page == total"
            src="../../../assets/image/publice/top-arrow.png"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import searchInfo from "@/components/searchInfo";
export default {
  components: {
    searchInfo,
  },
  data() {
    return {
      page: 1,
      total: 1,
      data: [],
      search: "",
      count: "",
    };
  },
  async beforeRouteUpdate(to) {
    this.getData(to.query.search);
  },
  mounted() {
    // if (this.$route.query.search) {
    //   this.search = this.$route.query.search;
    //   this.getData();
    // }
    this.getData();
  },
  methods: {
    /**
     * 获取数据
     */
    async getData(search = this.$route.query.search) {
      try {
        this.search = search;
        const result = await this.$request.get("Productcenter/productIndex", {
          params: {
            keywords: search,
            // keywords: '测试',

            page: this.page,
            pagenum: 8,
          },
        });

        //移动端
        if (document.body.clientWidth <= 1200) {
          this.data = this.data.concat(result.data?.product);
        } else {
          this.data = result.data?.product;
        }

        // this.data.push(result.data?.product[0]);
        // this.data.push(result.data?.product[0]);
        // this.data.push(result.data?.product[0]);
        this.total = result.data?.totalpage;
        this.count = result.data?.productnum;
        if (this.data?.length == 0) {
          this.$message.success("没有找到相关产品");
        }
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    /**
     * 加载更多
     */
    nextPage() {
      if (this.total != 1 && this.page < this.total) {
        this.page++;
        this.getData();
      } else {
        this.$message("沒有更多数据了");
      }
    },

    detail(e) {
      this.$router.push({
        path: "/productDetail",
        query: {
          id: e.id,
          //  index: this.index,
        },
      });
    },
    /**
     * 页面跳转
     */
    pageChange(e) {
      this.page = e;
      // 获取数据
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .searchMobile {
    display: none;
  }

  .searchPc {
    @include fn.fluidContainer;
    display: flex;
    flex-direction: column;
    align-items: center;

    .box {
      @include fn.container;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 50px;

      .search-box {
        margin-top: 48px;
        display: flex;
        width: 592px;
        height: 47px;
        align-items: center;

        .input-box {
          width: 386px;
          height: 48px;
          background: #ffffff;
          border: 1px solid #dfdfdf;
          border-radius: 24px;
          display: flex;
          height: 47px;
          align-items: center;

          .ic {
            margin-left: 10px;
            width: 47px;
            height: 47px;
          }

          .input {
            outline: none;
            padding-left: 10px;
            color: #030303;
            border: none;
            background-color: transparent;
            display: flex;
            align-items: center;
            width: 250px;
            height: 18px;
            font-size: 18;
            font-weight: 400;
          }

          input::-webkit-input-placeholder {
            color: #c9c9c9;
          }
        }

        .btn {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 23px;
          width: 184px;
          height: 48px;
          background: #ee7800;
          border-radius: 24px;
          color: #fff;
          font-size: 16px;

          &:active {
            background: rgba(210, 217, 236, 0.878);
          }
        }
      }

      .pagination {
        margin-top: 67px;
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .list {
        @include fn.container;
        display: flex;
        flex-wrap: wrap;
        //  gap: 32px;
        margin-top: 60px;

        .item {
          margin: 12px;
          cursor: pointer;
          box-sizing: border-box;
          padding: 26px 0;
          width: 276px;
          height: 300px;
          background: #f6f6f6;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .img {
            @include fn.scale(230px);
          }

          .category {
            // margin-top: 10px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            width: 230px;

            font-size: 16px;
            // color: #2e2e2f;
          }

          .name-box {
            justify-content: space-between;
            display: flex;
            width: 230px;
            height: 36px;
            align-items: center;
            border: 1px solid #cac8c7;
            border-radius: 18px;

            .name {
              @include fn.ellipsis(1);
              margin-left: 17px;
              font-size: 16px;
              color: #2e2e2f;
            }

            .ic {
              margin-right: 6px;
              height: 32px;
              width: 32px;
            }
          }

          &:hover {
            .name-box {
              background: linear-gradient(0deg, #ee7800, #f29539);
              border: 1px solid color.$base;

              .name {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .searchPc {
    display: none;
  }

  .searchMobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .box {
      width: fn.rpx(700);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: fn.rpx(50);

      .search-box {
        margin-top: fn.rpx(48);
        display: flex;
        width: fn.rpx(592);
        height: fn.rpx(47);
        align-items: center;

        .input-box {
          width: fn.rpx(386);
          height: fn.rpx(48);
          background: #ffffff;
          border: 1px solid #dfdfdf;
          border-radius: fn.rpx(24);
          display: flex;
          height: fn.rpx(47);
          align-items: center;

          .ic {
            margin-left: fn.rpx(10);
            width: fn.rpx(47);
            height: fn.rpx(47);
          }

          .input {
            outline: none;
            padding-left: fn.rpx(10);
            color: #030303;
            border: none;
            background-color: transparent;
            display: flex;
            align-items: center;
            width: fn.rpx(250);
            height: fn.rpx(18);
            font-size: fn.rpx(18);

            font-weight: 400;
          }

          input::-webkit-input-placeholder {
            color: #c9c9c9;
          }
        }

        .btn {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: fn.rpx(23);
          width: fn.rpx(184);
          height: fn.rpx(48);
          background: #ee7800;
          border-radius: fn.rpx(24);
          color: #fff;
          font-size: fn.rpx(24);

          &:active {
            background: rgba(210, 217, 236, 0.878);
          }
        }
      }

      .pagination {
        margin-top: fn.rpx(40);
        width: 100%;
        display: flex;
        justify-content: center;

        .more-box {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;

          .text {
            font-size: fn.rpx(16);

            font-weight: 500;
            color: color.$base;
          }

          .ic {
            margin-top: fn.rpx(10);
            width: fn.rpx(24);
            height: fn.rpx(24);
          }
        }
      }

      .list {
        // width: fn.rpx(676);
        width: fn.rpx(706);
        display: flex;
        flex-wrap: wrap;
        //  gap: fn.rpx(32);
        margin-top: fn.rpx(60);

        .item {
          margin: fn.rpx(15);
          cursor: pointer;
          box-sizing: border-box;
          padding: fn.rpx(26) 0;
          width: fn.rpx(323);
          height: fn.rpx(300);
          background: #f6f6f6;
          border-radius: fn.rpx(4);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .category {
            // margin-top: fn.rpx(10);
            overflow: hidden;
            display: flex;
            justify-content: center;
            width: fn.rpx(300);
            font-size: fn.rpx(16);
          }

          .img {
            // width: fn.rpx(230);
            // height: fn.rpx(129);
            @include fn.scale(fn.rpx(300));
          }

          .name-box {
            justify-content: space-between;
            display: flex;
            width: fn.rpx(300);
            height: fn.rpx(36);
            align-items: center;
            border: 1px solid #cac8c7;
            border-radius: 18px;

            .name {
              @include fn.ellipsis(1);
              margin-left: fn.rpx(17);
              font-size: fn.rpx(16);
              color: #2e2e2f;
            }

            .ic {
              object-fit: cover;
              margin-right: fn.rpx(6);
              height: fn.rpx(40);
              width: fn.rpx(40);
            }
          }

          &:hover {
            .name-box {
              background: linear-gradient(0deg, #ee7800, #f29539);
              border: fn.rpx(1) solid color.$base;

              .name {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>